<template>
  <el-row>
    <el-col :span="7">
      <el-card>
        <div class="org-container">
          <el-space>
            <el-button icon="Plus" type="primary" @click="addOrUpdateHandle()">新增GPS产品</el-button>
          </el-space>
          <el-table v-loading="state.dataListLoading" :data="data" border class="layout-table" @row-click="chooseList">
            <el-table-column type="index" width="50"></el-table-column>
            <el-table-column prop="deviceDesc" label="产品类型" header-align="center" align="center"></el-table-column>
            <el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
              <template #default="scope">
                <el-button type="primary" link @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
                <el-button type="primary" link @click="deleteList(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 弹窗, 新增 / 修改 -->
          <add-or-update ref="addOrUpdateRef" @refresh-data-list="getDataList"></add-or-update>
          <!--    </el-card>-->
        </div>
      </el-card>
    </el-col>
    <el-col :span="17">
      <el-card>
        <commands ref="commandsListRef" :propsId="propsId" :data="dataList" @refresh-data-list="[getSourceList(), getDataList()]"></commands>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup lang="ts" name="GpsProductIndex">
import commands from '@/views/gps/command_type/index.vue'
import { provide, reactive, ref } from 'vue'
import { IHooksOptions } from '@/hooks/interface'
import AddOrUpdate from './add-or-update.vue'
import { deleteProduct, getProductByUser } from '@/api/gps/product'
import { getAllCommand } from '@/api/gps/command_type'
const state: IHooksOptions = reactive({
  // dataListUrl: 'gps/product/ownerByUser',
  // deleteUrl: '',
  isPage: false,
  queryForm: {
    manufacturer: ''
  }
})
const propsId = ref()
const data = ref()
const sourceData = ref()
const deviceTypeId = ref()
const dataList = ref([])
const addOrUpdateRef = ref()
const commandsListRef = ref()

const addOrUpdateHandle = (id?: number) => {
  addOrUpdateRef.value.init(id)
}
provide('location', {
  getDataList,
  getSourceList
})
function deleteList(id) {
  deleteProduct(id).then(() => {
    getSourceList()
    getDataList()
  })
}
function getSourceList() {
  getAllCommand().then((res) => {
    sourceData.value = res.data
    dataList.value = sourceData.value.filter((item) => item.deviceType === deviceTypeId.value)
  })
}
function chooseList({ id }) {
  propsId.value = id
  dataList.value = sourceData.value.filter((item) => item.deviceType === id)
}
function getDataList() {
  getProductByUser().then((ref) => {
    data.value = ref.data
    deviceTypeId.value = data.value[0].id
  })
}
getSourceList()
getDataList()
</script>
<style>
.org-container {
  min-height: calc(100vh - 62px - var(--theme-header-height));
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  :deep(.el-tree) {
    margin-top: 20px;
  }
}
</style>
